<template>
	<view class="page-wapper">
		<globalheader title="提现">

			<template #right>
				<image src="/static/logicon.png" mode="" class="left-icon"
					@tap="LC.$router.go('/pages/user/withdrawalLog')"></image>
			</template>
		</globalheader>
		<view class="page-content">
		
			<view class="inputwapper" v-if="!LC.$store('user').bank.length" @tap="tobank">
				<view class="label">
					提现至
				</view>
				<text class="text">添加提现方式，去添加 ></text>

			</view>
			<view class="inputwapper1" v-else >
				<view class="top" @tap="tobank">
					<view class="label">
						提现至
					</view>
					<view class="text1 ss-flex"> 银行卡 <u-icon name="arrow-right" size="22rpx" color="#999" style="margin-left: 8rpx;"></u-icon> </view>
				</view>
				<view class="content"  v-if="nowcard.name">
					
					<view class="item12">
						<view class="title">
							卡号
						</view>
						<view class="value">
								{{nowcard.no}}
						</view>
					</view>
					<view class="item12">
						<view class="title">
							银行
						</view>
						<view class="value">
							{{nowcard.name}}
						</view>
					</view>
				
					
				</view>
				<view class="content" style="text-align: center;" v-else>
					暂无银行卡
				</view>
			
			
			</view>

			<view class="amount-wapper" >
				<view class="title">
					提现金额
				</view>
				<view class="amount ss-flex">
					￥<input type="digit" v-model="state.formdata.amount" placeholder-class="inputph"
						placeholder="请输入金额" />
						<!-- <view class="tran-price" v-if="way[state.wayIndex]?.name==='USDT'">
							≈ {{amount}} USDT
						</view> -->
						<text class="all" @tap="state.formdata.amount=info.commission">全部</text>
				</view>
				<view class="amount-tip ss-flex">
					<view class="left">
						可提现余额 <span>¥{{info.commission}}</span>
					</view>
					<!-- <view class="right">
						手续费{{withdrawalWay.fee_rate}}%
					</view> -->
				</view>
			</view>



			<button class="button" @tap="send">提交</button>
			<!-- <view class="tip">
				<view class="tip-title">
					·注意事项·
				</view>
				<view class="">
					<rich-text :nodes="state.node"></rich-text>
				</view>
			</view> -->
		</view>
		<!-- <globalPassWord @confirm="send" ref="passworddom"></globalPassWord> -->

		<u-picker :show="state.picker" keyName="name" @change="waykHandler" closeOnClickOverlay
			@close="()=>{state.picker=false}" itemHeight="40" :showToolbar="false"
			:columns="[way]"></u-picker>


	</view>
</template>

<script setup>
	import LC from '@/LC';

	import {
		computed,
		reactive,
		ref,
		onMounted,
		getCurrentInstance,
		nextTick
	} from 'vue';
	let withdrawalWay = computed(() => LC.$store('money').withdrawalWay)
	let info = computed(() => LC.$store('user').info)
	let state = reactive({
		
		wayIndex: 0,
		picker: false,
		node:'',
		cardindex:0,
		formdata: {

			amount: '',
			
		}
	})
	let passworddom=ref(null)
	function submit(){
		if (state.formdata.amount * 1 <= 0) {
			uni.$u.toast('请输入金额')
			return
		}
		passworddom.value.open()
	}
	onMounted(()=>{
		// richText()
	})
	
function tobank(){
	uni.$once('choocebank',(index)=>{state.cardindex=index})
	LC.$router.go('/pages/user/mybank?edit=1')
}	
	let nowcard=computed(()=>{
		if(LC.$store('user').bank.length){
			return LC.$store('user').bank[state.cardindex]
		}
		return {}
	})
	
	async function send(password) {
		
		
		const res = await LC.$api.pay.withdraw({
			money:state.formdata.amount,
			account_id:nowcard.value.id,
			
		})
		if (res.code == 1) {
			LC.$store('user').userinfo()
			uni.navigateBack({
				success: () => {

					uni.$u.toast('已提交')
				}
			})


		}
	}

	let way = computed(() => {
	if(withdrawalWay.value.usdt&&withdrawalWay.value.usdt){
		return [{name:'USDT',mode:2},{name:'银行卡',mode:1}]
	}	
	if(withdrawalWay.value.bank){
		return [{name:'银行卡',mode:1}]
	}	
	if(withdrawalWay.value.usdt){
		return [{name:'USDT',mode:2}]
	}	
	return []

		

	})
	
	async function richText(){
		const res = await LC.$api.app.page(1009)
		if (res.code == 1) {
		
				state.node=res.data.content
		}
	}
	let amount = computed(() => {



		if (state.formdata.amount) {


			return Math.floor(state.formdata.amount / withdrawalWay.value.usdt_cny * 100) / 100
		}

		return '--'

	})

	function tabchange({
		index
	}) {
		state.tabindex = index
	}

	function waykHandler({
		index
	}) {
		state.wayIndex = index
	}


	function upimg(key) {
		uni.chooseImage({
			success: async (chooseImageRes) => {
				const tempUrl = chooseImageRes.tempFilePaths[0];
				uploadPay_image(tempUrl, key);
			},
		});
	}
	async function uploadPay_image(tempUrl, key) {
		if (!tempUrl) return;
		let {
			file_path,
			file_url
		} = await LC.$api.app.upload(tempUrl, 'ugc');
		state.formdata[key] = file_path;
		state.formdata[key + '_full'] = file_url;
		console.log(state.formdata)
	}

	function copy(a) {
		if (a) {
			uni.setClipboardData({
				data: a, //当前点击的地址
				success: () => {
					uni.showToast({
						title: '已复制',
						icon: "none"
					})
				}
			});
		}
	}
</script>

<style lang="scss" scoped>
	.tip{
		margin-top: 122rpx;
		padding:0 31rpx ;
		
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 23rpx;
		color: #999999;
		line-height: 32rpx;
			
		.tip-title{
			text-align: center;
			margin-bottom: 31rpx;
		}
	}
	.button {
		

		height: 86rpx;
		flex-shrink: 0;
		margin-top: auto;
		background-color: #FC5652;
		border-radius: 15rpx;
		font-weight: 400;
		font-size: 31rpx;
		width: 100%;
		line-height: 86rpx;
		color: #fff;

		margin-top: 115rpx;

		&.dis {
			background-color: #CCCCCC;
		}

		&::after {
			display: none;
		}


	}

	.upload-wapper {
		margin-top: 53rpx;

		.title {
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 27rpx;
			color: #333333;
			line-height: 38rpx;
			margin-bottom: 21rpx;
		}

		.imgwapper {
			width: 191rpx;
			height: 191rpx;
			background: #FFFFFF;
			border-radius: 15rpx;

			.add {
				width: 38rpx;
				height: 38rpx;
			}
		}
	}
	.inputwapper1{
		background: #FFFFFF;
		border-radius: 15rpx;
		padding: 23rpx 21rpx;
		margin-bottom: 21rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		
		font-size: 27rpx;
		color: #333333;
		.content{
			margin-top: 20rpx;
			.item12{
				margin-top: 15rpx;
				.title{
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 23rpx;
					color: #999999;
					line-height: 32rpx;
				}
				.value{
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 23rpx;
					color: #333333;
					line-height: 32rpx;
				}
				display: flex;
				justify-content: space-between;
			}
		}
		.text {
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 23rpx;
			margin-left: auto;
			color: #999999;
			line-height: 32rpx;
		}
		
		.label {
			width: 105rpx;
		}
		.top{
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			display: flex;
			align-items: center;
			font-size: 27rpx;
			color: #333333;
			
			.text1 {
				margin-left: auto;
				
			}
			
			.label {
				width: 105rpx;
			}
		}
		
	}

	.inputwapper {
		background: #FFFFFF;
		border-radius: 15rpx;
		padding: 23rpx 21rpx;
		margin-bottom: 21rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		display: flex;
		align-items: center;
		font-size: 27rpx;
		color: #333333;

		.text {
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 23rpx;
			margin-left: auto;
			color: #999999;
			line-height: 32rpx;
		}

		.label {
			width: 105rpx;
		}



	}

	.inputph {
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 23rpx;
		color: #999999;
		line-height: 32rpx;
	}

	.page-content {
		padding: 34rpx 30rpx;
		box-sizing: border-box;

		.amount-wapper {
			margin-bottom: 34rpx;
			background: #FFFFFF;
			border-radius: 15rpx;
			padding: 27rpx 21rpx;

			.title {
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				font-size: 27rpx;
				color: #333333;
				line-height: 38rpx;
			}
		.tran-price{
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 23rpx;
			color: #999999;
			line-height: 32rpx;
		}

			.amount-tip {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 23rpx;
				margin-top: 20rpx;
				color: #999999;

				span {
					color: #FC5652;
				}

				.right {
					margin-left: auto;
				}

			}
			.all{
			
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 23rpx;
				
				color: #FC5652;
				line-height: 32rpx;
				margin-left: 15rpx;
			}

			.amount {
				margin-top: 27rpx;
				border-bottom: 2rpx solid #F3F3F3;
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				font-size: 46rpx;
				color: #333333;
				line-height: 63rpx;

				input {
					margin-left: 19rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 600;
					font-size: 55rpx;
					flex: 1;
					color: #333333;
					line-height: 78rpx;
				}

			}

		}
	}

	.left-icon {
		display: flex;
		width: 41rpx;
		height: 42rpx;
	}
</style>